<template>
  <div>
    <div class="comment-title"><i class="iconfont iconpinglunzu" />请留言</div>
    <!-- 评论框 -->
    <div class="comment-input-wrapper">
      <div style="display: flex">
        <v-avatar size="40">
          <img
            @click="dialog = false"
            v-if="this.$store.state.blogInfo.avatarImg"
            :src="this.$store.state.blogInfo.avatarImg"
          />
          <img
            v-else
            @click="dialog = true"
            src="https://gravatar.loli.net/avatar/d41d8cd98f00b204e9800998ecf8427e?d=mp&v=1.4.14"
          />
        </v-avatar>
        <div style="width: 100%" class="ml-3">
          <div class="comment-input">
            <textarea
              class="comment-textarea"
              v-model="commentContent"
              placeholder="动一下你的小手，留个言吧..."
              auto-grow
              dense
            />
          </div>
          <!-- 操作按钮 -->
          <div class="emoji-container">
            <button
              @click="insertComment"
              class="upload-btn v-comment-btn"
              style="margin-left: auto"
            >
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论详情 -->
    <div v-if="count > 0 && reFresh">
      <!-- 评论数量 -->
      <div class="count">{{ count }} 留言</div>
      <!-- 评论列表 -->
      <div
        style="display: flex"
        class="pt-5"
        v-for="(item, index) of commentList"
        :key="item.id"
      >
        <!-- 头像 -->
        <v-avatar size="40" class="comment-avatar">
          <img :src="item.avatarImg" />
        </v-avatar>
        <div class="comment-meta">
          <!-- 用户名 -->
          <div class="comment-user">
            <span>{{ item.nickName }}</span>
            <span
              class="blogger-tag"
              v-if="item.userId == '5ec884e3fe28d35475b43fb3'"
              >博主</span
            >
          </div>
          <!-- 信息 -->
          <div class="comment-info">
            <!-- 楼层 -->
            <span style="margin-right: 10px">{{ index + 1 }}楼</span>
            <!-- 发表时间 -->
            <span style="margin-right: 10px">{{ item.createdAt | date }}</span>
          </div>
          <!-- 评论内容 -->
          <p v-html="item.content" class="comment-content"></p>
        </div>
      </div>
      <!-- 加载按钮 -->
      <div class="load-wrapper">
        <v-btn outlined v-if="count > commentList.length" @click="listComments">
          加载更多...
        </v-btn>
      </div>
    </div>
    <!-- 没有评论提示 -->
    <div v-else style="padding: 1.25rem; text-align: center">来发评论吧~</div>
    <!-- 弹窗 -->
    <v-dialog v-model="dialog" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2">
          请输入信息
        </v-card-title>
        <v-form>
          <v-container>
            <v-row>
              <v-col cols="12" md="11">
                <v-text-field
                  v-model="user.qq_email"
                  :rules="emailRules"
                  label="请输入qq邮箱(目的是为了获取头像)"
                  required
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="11">
                <v-text-field
                  v-model="user.name"
                  :rules="nameRules"
                  label="请输入昵称"
                  required
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" md="11">
                <v-text-field
                  v-model="user.url"
                  label="请输入相关url(选填)"
                  required
                ></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-form>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="success" text @click="submit()">提交</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 提示框 -->
    <v-snackbar v-model="snackbar">
      {{ textSnackbar }}
      <v-btn color="pink" text @click="snackbar = false"> 关闭 </v-btn>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  props: {
    commentList: {
      type: Array,
    },
    count: {
      type: Number,
    },
  },
  inject: ["reload"],
  data: function () {
    return {
      reFresh: true,
      commentContent: "",
      current: 1,
      dialog: false,
      snackbar: false,
      textSnackbar: "",
      user: {
        name: "",
        url: "",
        qq_email: "",
      },
      nameRules: [
        (v) => !!v || "必须填写昵称",
        (v) => (v && v.length <= 10) || "名字长度小于10",
      ],
      emailRules: [
        (v) => !!v || "必须填写QQ邮箱(用于获取头像)",
        (v) =>
          /^[0-9a-z_]+@(([0-9a-z]+)[.]){1,2}[a-z]{2,3}$/.test(v) ||
          "必须填写QQ邮箱(用于获取头像)",
      ],
    };
  },
  methods: {
    submit() {
      let formData = this.user;
      if (
        /^[0-9a-z_]+@(([0-9a-z]+)[.]){1,2}[a-z]{2,3}$/.test(
          formData.qq_email
        ) === true &&
        formData.name.length < 10 &&
        formData.name.length > 0
      ) {
        let qq = formData.qq_email.slice(0, -7);
        formData.avatarImg = "https://q1.qlogo.cn/g?b=qq&nk=" + qq + "&s=100";
        this.$store.state.blogInfo = formData;
        this.dialog = false;
      }
    },
    snackbarF(text) {
      this.textSnackbar = text;
      this.snackbar = true;
    },
    async insertComment() {
      //判断用户信息
      if (this.user.name == "") {
        this.snackbarF("请点击头像处填写个人信息再评论!");
        console.log(666);
      } else if (this.commentContent.trim() == "") {
        this.snackbarF("请写下您的留言再提交!");
        console.log(666);
      } else {
        let comment = {
          nickName: this.$store.state.blogInfo.name,
          avatarImg: this.$store.state.blogInfo.avatarImg,
          content: this.commentContent,
          byAiteName: "2U",
        };
        const res = await this.$http.post("messages", comment);
        let user = {
          nickName: this.$store.state.blogInfo.name,
          email: this.$store.state.blogInfo.qq_email,
          url: this.$store.state.blogInfo.url,
          avatarImg: this.$store.state.blogInfo.avatarImg,
        };
        const resgetUser = await this.$http.get(`users`);
        let emailArr = [];
        resgetUser.data.forEach((v) => {
          emailArr.push(v.email);
        });
        if (emailArr.includes(user.email) == false) {
          await this.$http.post("users", user);
        }
        if (res) {
          this.snackbarF("提交成功!");
          this.reload();
        } else {
          this.snackbarF("提交失败!");
        }
      }
    },
  },
  watch: {
    commentList() {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    },
  },
};
</script>

<style scoped>
p {
  margin-bottom: 1.25rem !important;
}
.blogger-tag {
  background: #ffa51e;
  font-size: 12px;
  display: inline-block;
  border-radius: 2px;
  color: #fff;
  padding: 0 5px;
  margin-left: 6px;
}
.comment-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 10px;
}
.comment-title i {
  font-size: 1.5rem;
  margin-right: 5px;
}
.comment-input-wrapper {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}
.count {
  padding: 5px;
  line-height: 1.75;
  font-size: 1.25rem;
  font-weight: bold;
}
.comment-meta {
  margin-left: 0.8rem;
  width: 100%;
  border-bottom: 1px dashed #f5f5f5;
}
.reply-meta {
  margin-left: 0.8rem;
  width: 100%;
}
.comment-user {
  font-size: 14px;
  line-height: 1.75;
}
.comment-user a {
  color: #1abc9c !important;
  font-weight: 500;
  transition: 0.3s all;
}
.comment-nickname {
  text-decoration: none;
  color: #1abc9c !important;
  font-weight: 500;
}
.comment-info {
  line-height: 1.75;
  font-size: 0.75rem;
  color: #b3b3b3;
}
.reply-btn {
  cursor: pointer;
  float: right;
  color: #ef2f11;
}
.comment-content {
  display: flex;
  font-size: 0.875rem;
  line-height: 1.75;
  padding-top: 0.625rem;
}
.comment-avatar {
  transition: all 0.5s;
}
.comment-avatar:hover {
  transform: rotate(360deg);
}
.like {
  cursor: pointer;
  font-size: 0.875rem;
}
.like:hover {
  color: #eb5055;
}
.like-active {
  cursor: pointer;
  font-size: 0.875rem;
  color: #eb5055;
}
.load-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load-wrapper button {
  background-color: #49b1f5;
  color: #fff;
}
</style>
